<template>
	<view>
		<form @submit="formSubmit">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl || 'https://www.atuanjian.com/appletStatic/static/login-img.png'"></image>
			</button>
			<input type="text" name="avatarUrl" :value="avatarUrl" style="display: none;" />
			<!-- 'uploads'+avatarUrl.split('uploads')[1] -->
			<input type="text" name="country" :value="country" style="display: none;" />
			<input type="text" name="province" :value="province" style="display: none;" />
			<input type="text" name="city" :value="city" style="display: none;" />
			<!-- <input type="text" name="area" :value="area" style="display: none;" /> -->
			<!-- <input type="text" name="phone" :value="phone" style="display: none;" /> -->
			<view class="name">
				<view class="name-view name-title">昵称</view>
				<view class="name-view name-input">
					<input type="nickname" name="nickName" @nicknamereview="namereview" class="weui-input"
						placeholder="请输入昵称" :value="nickName" />
				</view>
			</view>
			<view class="name">
				<view class="name-view name-title">手机</view>
				<view class="name-view name-input">
					<button open-type="getPhoneNumber" @getphonenumber="getPhone" size="mini">{{phone}}</button>
				</view>
			</view>
			<view class="name">
				<view class="name-view name-title">性别</view>
				<view class="name-view name-input">
					<radio-group name="gender">
						<label class="radio">
							<radio value="1" :checked="gender == 1" />男
						</label>
						<label class="radio">
							<radio value="2" :checked="gender == 2" />女
						</label>
					</radio-group>
				</view>
			</view>
			<view class="login">
				<button form-type="submit">{{resultText}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import wechat from '@/utils/wechat.js'

	const app = getApp()
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				theme: uni.getSystemInfoSync().theme,
				pass: false, // 用户名合法性
				imagePath: this.imgPath,
				gender: 1, // 性别
				edit: false,
				resultText: '登录',
				phone: '手机号',
			}
		},
		onLoad(e) {
			if (e.edit) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				this.avatarUrl = userInfo.avatarUrl;
				this.nickName = userInfo.nickName;
				this.gender = userInfo.gender;
				this.pass = userInfo.avatarUrl ? true : false;
				this.resultText = '修改';
				if (uni.getStorageSync('phone'))
					this.$data.phone = uni.getStorageSync('phone');
			}
		},
		methods: {
			onShow() {
				// uni.onThemeChange((result) => {
				// 	this.$data.theme = result.theme;
				// })
				// this.getChinaArea();
			},
			getPhone(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					wechat.getUserPhone(e, this.setUserPhone);
				}
				// console.log('获取手机号',e)
			},
			setUserPhone(phone) {
				this.$data.phone = phone;
			},
			/**
			 * 登录
			 * @param {*} e 
			 */
			formSubmit(e) {
				var params = e.detail.value;
				// console.log('formSubmit', params)
				// return false;
				if (this.$data.pass && params.avatarUrl) {
					wechat.login().then(res => {
						params.code = res[1].code; // 登录凭证
						// console.log('params.avatarUrl', params.avatarUrl, params.avatarUrl.indexOf('storage/uploads'))
						if (params.avatarUrl.indexOf('storage/uploads') > -1) {
							wechat.userLogin(params, this.backs());
						} else {
							wechat.userLogin(params, this.setUserInfo);
						}
					})
				} else {
					uni.showToast({
						title: '头像或昵称验证失败',
						duration: 2000,
						icon: 'none'
					})
				}
			},
			/* 返回上一页 */
			backs: function() {
				uni.hideLoading();
				let t = this
				uni.showToast({
					title: t.resultText + '成功',
					duration: 2000,
					icon: 'none'
				})
				setTimeout(function() {
					return uni.navigateBack();
				}, 2000);
			},
			/**
			 * 设置用户信息
			 */
			setUserInfo: function(e) {
				uni.showLoading({
					title: '提交中'
				});
				let t = this
				// console.log('setUserInfo()', e)
				uni.uploadFile({
					url: t.$config.upLoadApi + 'file/imageUpload', // 接口地址
					filePath: e.avatarUrl,
					name: 'file',
					formData: {
						file: e.avatarUrl,
						token: JSON.parse(uni.getStorageSync('userInfo')).token,
						isAvatarUrl: true,
					},
					success: (res) => {
						var data = JSON.parse(res.data);
						// console.log('uploadFile.data', data)
						uni.hideLoading();
						if (data.code == 200) {
							data.userInfo.avatarUrl = t.$config.showImgApi + data.userInfo.avatarUrl;
							uni.setStorageSync('userInfo', JSON.stringify(data.userInfo));
							uni.showToast({
								title: t.resultText + "成功",
								duration: 2000,
								icon: 'none'
							})
							uni.$emit('closeLogin', 'login');
							// 在C页面内 navigateBack，将返回A页面
							setTimeout(function() {
								return uni.navigateBack();
							}, 2000);
						} else {
							uni.showToast({
								title: t.resultText + '失败',
								duration: 2000,
								icon: 'none'
							})
						}
					},
				});
			},
			/**
			 * 用户名合法性验证
			 * @param {*} e 
			 */
			namereview: function(e) {
				// console.log(e)
				this.$data.pass = e.detail.pass;
			},
			/**
			 * @param {*} e 
			 */
			onChooseAvatar(e) {
				// console.log(e)
				this.$data.avatarUrl = e.detail.avatarUrl;
			},
			/**
			 * 性别
			 */
			// radioChange:function(e){
			// 	this.$data.gender = e.detail.value;
			// }
		}
	}
</script>

<style>
	.avatar-wrapper {
		padding: 0;
		width: 150rpx !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 150rpx;
		height: 150rpx;
	}

	.container {
		display: flex;
	}

	.name {
		overflow: hidden;
		border-top: 2rpx solid #ccc;
		border-bottom: 2rpx solid #ccc;
		padding: 20rpx 0;
	}

	.name-view {
		float: left;
	}

	.name-title {
		width: 200rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		font-weight: 600;
	}

	.name-input {
		width: 500rpx;
	}

	.radio {
		margin-right: 30rpx;
	}

	.mt-40 {
		margin-top: 40rpx;
	}

	.login {
		width: 100%;
		margin: 60rpx auto 0;
	}

	.address .input-value {
		height: 44rpx !important;
	}
</style>